<%@ page import="com.lengmou.entity.Cars" %>
<%@ page import="com.lengmou.service.GoodsService" %>
<%@ page import="com.lengmou.entity.Goods" %>
<%@ page contentType="text/html;charset=UTF-8" language="java"  %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page import="org.springframework.web.context.support.WebApplicationContextUtils" %>
<%@page import="org.springframework.web.context.WebApplicationContext" %>
<%@ page import="com.lengmou.entity.OrdersInfo" %>
<% String path = request.getContextPath();WebApplicationContext context=WebApplicationContextUtils.getWebApplicationContext(application); %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="apple-mobile-web-app-title" content="魔法集市">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=1200">
    <meta name="keywords" content="GSC,寿屋,万代,眼镜工厂,千值练,海洋堂,粘土人,MAXFACTORY,ALTER,良笑,三丽鸥,Sanrio,Takaratomy,KADOKAWA,Chara-ani,AmiAmi,手办自营,周边自营,谷子自营">
    <meta name="description" content="魔法集市·自营是专注于二次元的日本代购网站以及动漫周边自营零售网站，为用户提供快捷方便的游戏动漫代购，ACG周边、声优周边、同人商品及其他日系商品一应俱全，目前支持日本亚马逊、虎穴(虎之穴)、骏河屋、Book-off、C-queen(K-books)和Melonbooks(蜜瓜)等网站的代购。与此同时，魔法集市・自营整合来自日本的第一手货源，为大家精心挑选了各种热门人气商品。所有商品均从魔法集市的日本仓库打包发出，配合全新的「喵急便」物流服务直接送达您的手中，您将能获得焕然一新的消费体验">
    <link rel="icon" href="http://masadora-js.masadora.net/static/new_masadora/images/favicon/masadora-icon.png">
    <link rel="apple-touch-icon" href="http://masadora-js.masadora.net/static/new_masadora/images/favicon/masadora-icon.png">
    <link rel="apple-touch-icon-precomposed" href="http://masadora-js.masadora.net/static/new_masadora/images/favicon/masadora-icon.png">
    <script src="<%=path%>/js/jquery-3.1.0.js" ></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script>
        $(function () {
            var tongji=0;
            var youhui = parseFloat($("#youhui").html());
            $(".cart-item-box").each(function () {
                var price= parseFloat($(this).find("#price").html());
                var num = parseInt($(this).find(".number").html());
                $(this).find("#ppp").html((price*num).toFixed(2))
                var jiage=(price*num).toFixed(2);
                tongji+=parseFloat(jiage);
            });
            $("#zong").html(tongji);
            $("#tongji").html(tongji-youhui);



            $('button[action="取消订单"]').click(function () {

            });



            $("#pay").click( function () {
                // 打开支付密码对话框并生成订单
                $('.pay-part').css("display", "block");
            });
            $(".cancel-btn").on("click", function () {
                $('.pay-part').css("display", "none");
                $inputs.each(function () {  //input清空
                    $(this).val("");
                })
                pwd = "";
                $(".real-ipt").val("");
            })
            $(".confirm-btn").on("click", function () {
                console.log("password:" + pwd);
                if (len === 6 && pwd) {     //付款

                    // $.toast("密码错误")
                    window.location.href = 'activity_buy_result.html'

                } else {
                    $.toast("请输入支付密码")
                }
            })

            var pwd = "";
            var len = 0;
            // type=tel input框
            var $inputs = $(".surface-ipt input");
            $(".real-ipt").on("input", function () {
                if (!$(this).val()) {   //无值
                }
                if (/^[0-9]*$/g.test($(this).val())) {  //有值且只能是数字（正则）
                    pwd = $(this).val().trim();
                    len = pwd.length;
                    for (var i in pwd) {
                        $inputs.eq(i).val(pwd[i]);
                    }
                    $inputs.each(function () {  //将有值的当前input 后面的所有input清空
                        var index = $(this).index();
                        if (index >= len) {
                            $(this).val("");
                        }
                    })
                    if (len === 6) {
                        //执行付款操作
                    }

                } else {    //清除val中的非数字，返回纯number的value
                    var arr = $(this).val().match(/\d/g);
                    try {
                        $(this).val($(this).val().slice(0,$(this).val().lastIndexOf(arr[arr.length-1])+1));
                    } catch(e) {
                        // console.log(e.message)
                        //清空
                        $(this).val("");
                    }
                }
                console.log("password:" + pwd);
            })
            //  获取焦点事件避免输入键盘挡住对话框
            $('.real-ipt').on('focus', function () {
                $('.pay-dialog').css('top','1rem')
            })
            $('.real-ipt').on('blur', function () {
                $('.pay-dialog').css('top','3rem')
            })
        });
    </script>
    <title>订单详情</title>
</head>
<body>
<
<style>
    .common-part{
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        background-color: #000000;
        /*父块透明，子块不透明，用rgba*/
        background: rgba(0,0,0,0.3);
    }
    .common-dialog{
        width: 7.2rem;
        text-align: center;
        position: absolute;
        background: #ffffff;
        z-index: 2;
        opacity: 1;
        border-radius: .1rem;
        border: 1px solid #f2f2f2;
        left: calc(50% - 3.6rem);
        left: -moz-calc(50% - 3.6rem);
        left: -webkit-calc(50% - 3.6rem);
        top: 3rem;
    }
    .pay-part{
        display: none;
    }
    .pay-dialog{
        height: 6.9rem;
    }
    .dialog-title{
        height: 1.5rem;
        line-height: 1.5rem;
        color: #333333;
        font-size: .48rem;
        border-bottom: 1px solid #f2f2f2;
    }
    .pay-money{
        color: #333333;
        font-size: .6rem;
        margin: .6rem 0;
        font-weight: bold;
    }
    .pay-password{
        width: 6.6rem;
        height: 1.2rem;
        border: 1px solid #999999;
        margin: 0 auto;
        position: relative;
    }
    .pay-password .real-ipt{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 1.2rem;
        line-height: 1.2rem;
        opacity: 0;
        z-index: 3;
    }
    .pay-password .surface-ipts{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 1.2rem;
        line-height: 1.2rem;
        z-index: 1;
        overflow: hidden;
    }
    .pay-password .surface-ipts .surface-ipt{
        height: 1.2rem;
        line-height: 1.2rem;
        display: flex;
        justify-content: space-between;
    }
    .pay-password .surface-ipts .surface-ipt input{
        width: 1.1rem;
        height: 1.12rem;
        line-height: 1.12rem;
        border: 0;
        border-right: 1px solid #999999;
        color: #333333;
        font-size: .9rem;
        text-align: center;
        padding: 0;
    }
    .pay-part .btns{
        margin: .48rem 0;
    }
    .cancel-btn{
        width: 3rem;
        height: 1.2rem;
        line-height: 1.2rem;
        /*background: url("../res/h5tel_btn_blueline_300x120.png") center no-repeat;*/
        background-size: 100%;
        color: #2ea7e0;
        font-size: .42rem;
        border: none;
    }
    .confirm-btn{
        width: 3rem;
        height: 1.2rem;
        line-height: 1.2rem;
        /*background: url("../res/h5tel_btn_blue_300x120.png") center no-repeat;*/
        background-size: 100%;
        color: #ffffff;
        font-size: .42rem;
        border: none;
        margin-left: .6rem;
    }
</style>
<div class="common-part pay-part">
    <div class="common-dialog pay-dialog">
        <div class="dialog-title">请输入支付密码</div>
        <div class="pay-money">$10000.00</div>
        <div class="pay-password">
            <input type="tel" maxlength="6" class="real-ipt">
            <div class="surface-ipts">
                <div class="surface-ipt">
                    <input type="password" >
                    <input type="password" >
                    <input type="password" >
                    <input type="password" >
                    <input type="password" >
                    <input type="password" >
                </div>
            </div>
        </div>
        <div class="btns">
            <button class="cancel-btn">取消</button>
            <button class="confirm-btn">付款</button>
        </div>
    </div>
</div>
<%--<div class="modal fade" id="paypwd">--%>
    <%--<div class="modal-dialog">--%>
        <%--<div class="modal-content">--%>

            <%--<!-- 模态框头部 -->--%>
            <%--<div class="modal-header">--%>
                <%--<h4 id="title" class="modal-title">支付密码：</h4>--%>
                <%--<button type="button" class="close" data-dismiss="modal">&times;</button>--%>
            <%--</div>--%>

            <%--<!-- 模态框主体 -->--%>
            <%--<div id="body" class="modal-body">--%>
                <%--<input type="password">--%>
                <%--<input type="password">--%>
                <%--<input type="password">--%>
                <%--<input type="password">--%>
                <%--<input type="password">--%>
                <%--<input type="password">--%>
            <%--</div>--%>

            <%--<!-- 模态框底部 -->--%>
            <%--<div class="modal-footer">--%>
                <%--<button type="button" class="btn btn-secondary" data-dismiss="modal">确定</button>--%>
            <%--</div>--%>

        <%--</div>--%>
    <%--</div>--%>
<%--</div>--%>

<%@include file="header.jsp"%>
<div id="M">
    <div class="view view-confirm">
        <div class="bg-white">
            <div class="ui-layout">
                <div class="view-confirm-box" data-buy-type="1000" data-buy-step="1">
                    <div class="ui-square-box view-confirm-info-list-box">
                        <div class="head">
                            <h3>订单详情</h3></div>
                        <div class="body">
                            <div class="view-confirm-informations-box">
                                <div class="view-confirm-information-box" data-name="address">
                                    <h4>订单状态</h4>
                                    <%--<button class="nostyle" action="管理收货地址">新增收货地址</button>--%>
                                    <div class="list">
                                        <label>
                                            <input type="radio" name="address"  checked="">
                                            <h5>
                                                <c:choose>
                                                    <c:when test="${orders.state==0}">
                                                        <b>待支付</b>
                                                    </c:when>
                                                    <c:when test="${orders.state==-1}">
                                                        <b>已取消</b>
                                                    </c:when>
                                                    <c:when test="${orders.state==1}">
                                                        <b>已完成</b>
                                                    </c:when>
                                                </c:choose>
                                                <%--<span>中国海南省定安县定安县 阿斯顿</span>--%>
                                                <%--<cite>15653701040</cite>--%>
                                            </h5>
                                            <%--<span class="ctrl-box">--%>
                                                <%--<button class="nostyle" data-id="10465" action="去支付">去支付</button>--%>
                                                <%--<button class="nostyle" data-id="10465" action="取消订单">取消</button>--%>
                                            <%--</span>--%>
                                        </label>
                                    </div>
                                </div>
                                <div class="view-confirm-information-box" data-name="realInfo">
                                    <h4>备注信息</h4>
                                    <div class="list">
                                        <span>${orders.remarks}</span>
                                        <%--<a class="nostyle" style="color:#3399FF;position: absolute;right: 130px" action="去实名">前往添加</a></div>--%>
                                </div>
                                <div class="view-confirm-information-box" data-name="pay-type">
                                <h4>支付方式</h4>
                                <span class="ui-pay-type-button" data-name="alipay" class="active">支付宝</span></div>
                            </div>
                        </div>
                    </div>
                    <div class="ui-square-box view-confirm-confirm-box view-confirm-goods-box">
                        <div class="head">
                            <h3>订单商品</h3></div>
                        <div class="body">
                            <div class="carts-box">
                                <!--开始循环-->
                                <c:forEach items="${ordersinfo}" var="info">
                                    <%
                                        OrdersInfo info = (OrdersInfo) pageContext.getAttribute("info");
                                        GoodsService gs = context.getBean("GoodsService", GoodsService.class);
                                        Goods goods = gs.getGoodsById(info.getGoodsid());
                                        pageContext.setAttribute("goods",goods);
                                    %>
                                    <div class="cart-item-box" data-sale-type="2000" data-id="${info.id}">
                                        <div class="good-info-box" data-id="${goods.id}">
                                            <a href="goodsinfo.jsp?goodsid=${goods.id}" target="_blank">
                                                <div class="cover-box">
                                                    <img src="<%=path%>/${goods.img}"></div>
                                                <div class="info-box">
                                                    <h4>${goods.name}</h4>
                                                    <div class="tags-box">
                                                        <span data-name="预售">预售</span>
                                                        <span data-name="跨境购">跨境购</span></div>
                                                </div>
                                                <p class="spec-item">规格：默认</p></a>
                                        </div>
                                        <span id="price" class="price wm1">${goods.price}</span>
                                        <div class="num-box">
                                            <div class="number">${info.num}</div></div>
                                        <div class="calc-price-box">
                                            <b>全款：
                                                <span id="ppp" class="price-item" data-price="124"></span>元</b>
                                            <span>（补款：
                    <span class="price-item" data-price="">0</span>元）</span></div>
                                    </div>
                                    <!--结束循环-->
                                </c:forEach>
                            </div>
                        </div>
                    </div>
                    <div class="ui-square-box view-confirm-adjectives-box">
                        <div class="head">
                            <h3>优惠券信息</h3>
                        </div>
                        <div class="body">
                            <div class="adjectives-list">
                                <label>
                                    <c:choose>
                                        <c:when test="${coupons!=null}">
                                            <h2>
                                                <input type="radio"   data-area-id="1706"  checked="">
                                                <%--优惠券id：${coupons.id}--%>
                                                满${coupons.full}元 减 ${coupons.cut}元
                                            </h2>
                                        </c:when>
                                        <c:otherwise>
                                            <p class="text-banner" style="padding: 20px 45px 45px 20px;">没有使用优惠</p>
                                        </c:otherwise>
                                    </c:choose>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="ui-square-box view-confirm-calc-box">
                        <div class="body">
                            <div class="ctrl-box">
                                <div class="calc-box">
                                    <div class="calc-box">
                                        <p><b><span class="num-item"></span> 商品总金额</b><span class="value"><span class="price-origin-item" style="color: #ff5700" id="zong"></span> 元</span></p>
                                        <p><b>优惠</b><span class="value"><span class="price-adjective-item" id="youhui" style="color: #ff5700">${coupons.cut}</span> 元</span></p>
                                        <hr />
                                        <p><b>应付总额</b><span class="value"><big><span id="tongji" class="price-all-item"></span> 元</big></span></p>
                                    </div>
                                    <c:if test="${orders.state==0}">
                                        <p>
                                            <button id="pay" data-toggle="modal" data-target="#paypwd" class="btn" >支付</button>
                                            <button class="btn stroke" action="取消订单">取消订单</button>
                                        </p>
                                    </c:if>
                                </div>
                                <p class="address-text"></p>
                                <p class="buy-1-2000-tip">提示：本次支付的是商品定金，商品发售后进行补款，收货地址将在补款时进行填写（仅支持中国大陆）。</p></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<%@include file="foot.jsp"%>
<div id="tishi" class="ui-toast-box h"></div>

</body>
</html>
